import React from 'react'
import { useAuth } from 'context/auth-context'
import { Form, Input, Button } from 'antd'
import { LongButton } from 'unauthenticated-app'
import { useAsync } from 'utils/use-async'
export const LoginScreen = ({ onError }: { onError: (e: Error) => void }) => {
  const { login } = useAuth()
  const { run, isLoading } = useAsync()
  const handleSubmit = async (value: { username: string; password: string }) => {
    await run(login(value)).catch((error: Promise<{ status: number; message: string }>) => {
      console.log(error)
      error.then((e: any) => {
        onError(e)
      })
    })
  }

  return (
    <div>
      <Form onFinish={handleSubmit}>
        <Form.Item name={'username'} rules={[{ required: true, message: '请输入用户名' }]}>
          <Input placeholder={'用户名'} type="text" id={'username'} />
        </Form.Item>
        <Form.Item name={'password'} rules={[{ required: true, message: '请输入密码' }]}>
          <Input placeholder={'密码'} type="password" id={'password'} />
        </Form.Item>

        <LongButton loading={isLoading} htmlType={'submit'} type={'primary'}>
          登录
        </LongButton>
      </Form>
    </div>
  )
}
